<template>
    <div class="view" :style="scaleStyle">
        <Header @changeOrg="changeOrg"/>
        <div class="view-box">
            <div class="content">
                <projectSituation :project="dataObj.project"/>
                <div class="box">
                    <incomeStatistics :income="dataObj.income"/>
                    <projectControl :mgr="dataObj.mgr"/>
                </div>
                <div class="right-box">
                    <project :mgr="dataObj.mgrThree"/>
                    <problemProject :question="dataObj.question"/>
                </div>
            </div>
            <div class="bar-box">
                <titleComponent title="双五五指标"></titleComponent>
                <BarBaseChart :dataList="dataList" />
            </div>
            <div class="content">
                <BusinessScheduling />
                <TopList />
            </div>
        </div>
    </div>
</template>
<script>
import Header from "./components/Header";
import titleComponent from "./components/titleComponent";
import projectSituation from "./components/projectSituation";
import incomeStatistics from "./components/incomeStatistics";
import projectControl from "./components/projectControl";
import project from "./components/Project";
import problemProject from "./components/problemProject";
import BarBaseChart from "./components/BarBaseChart";
import BusinessScheduling from "./components/BusinessScheduling";
import TopList from "./components/topList.vue";
import { getData } from '@/api/api'
export default {
    name: "index",
    components: {
        Header,
        projectSituation,
        incomeStatistics,
        projectControl,
        project,
        problemProject,
        titleComponent,
        BarBaseChart,
        BusinessScheduling,
        TopList
    },
    computed: {
        /* 屏幕缩放倍数 */
        scaleStyle() {
            return { transform: 'scale(' + this.screenScale.scaleX + ',' + this.screenScale.scaleY + ')' }
        }
    },
    mounted() {
        this.scale()
        window.addEventListener('resize', this.scale)
        this.$once('hook:beforeDestory', () => {
            window.removeEventListener('resize', this.scale)
        })
        this.getDataNum('1001');
    },
    data() {
        return {
            dataObj: {},
            screenScale: {
                scaleX: 1,
                scaleY: 1
            },
            dataList: [
                { name: '省公司', value: 100, attr: '移动中标金额占比' },
                { name: '哈尔滨', value: 87, attr: '移动中标金额占比' },
                { name: '齐齐哈尔', value: 90, attr: '移动中标金额占比' },
                { name: '佳木斯', value: 40, attr: '移动中标金额占比' },
                { name: '大庆', value: 70, attr: '移动中标金额占比' },
                { name: '牡丹江', value: 50, attr: '移动中标金额占比' },
                { name: '绥化', value: 78, attr: '移动中标金额占比' },
                { name: '七台河', value: 66, attr: '移动中标金额占比' },
                { name: '鸡西', value: 36, attr: '移动中标金额占比' },
                { name: '黑河', value: 16, attr: '移动中标金额占比' },
                { name: '鹤岗', value: 25, attr: '移动中标金额占比' },
                { name: '省公司', value: 70, attr: '移动中标个数占比' },
                { name: '哈尔滨', value: 69, attr: '移动中标个数占比' },
                { name: '齐齐哈尔', value: 55, attr: '移动中标个数占比' },
                { name: '佳木斯', value: 91, attr: '移动中标个数占比' },
                { name: '大庆', value: 36, attr: '移动中标个数占比' },
                { name: '牡丹江', value: 81, attr: '移动中标个数占比' },
                { name: '绥化', value: 27, attr: '移动中标个数占比' },
                { name: '七台河', value: 81, attr: '移动中标个数占比' },
                { name: '鸡西', value: 34, attr: '移动中标个数占比' },
                { name: '黑河', value: 12, attr: '移动中标个数占比' },
                { name: '鹤岗', value: 14, attr: '移动中标个数占比' },
            ]
        }
    },
    methods: {
        /* 界面伸缩 */
        scale() {
            var width = document.body.clientWidth
            var height = document.body.clientHeight
            const scaleX = width / 1920
            const scaleY = height / 945
            this.screenScale = {
                scaleX,
                scaleY
            }
            this.mapScreenScale = {
                scaleX: width / 1920,
                scaleY: height / 980
            }
        },
        getDataNum(orgId){
            getData({ cityId: orgId }).then(res=>{
                console.log('res===>', res)
                this.dataObj = res.data || {}
            })
        },
        changeOrg(orgId){
            console.log('orgId', orgId)
            this.getDataNum(orgId)
        }
    }
}
</script>

<style lang="less" scoped>
.view{
    width: 1920px;
    min-height: 100%;
    transform-origin: top left;
}
.view-box {
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
    background: #f0f7fd;
    padding: 16px;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.right-box {
    width: 446px;
    height: 600px;
    margin-bottom: 16px;
}

.box {
    width: 960px;
    height: 600px;
    margin-bottom: 16px;
}

.bar-box {
    width: 100%;
    height: 300px;
    background: #fff;
    margin-bottom: 16px;
    box-sizing: border-box;
    padding: 16px;
}
</style>